<template>
    <div class="page checkPointDetail-page" data-page="checkCompletedNew" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link back" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title" id="check_pointName_{{getNewId}}"></div>
        </div>
        <div class="page-content pointBaiduMap-page-content">
            <div class="pointImg-top">
                <img style="width: 100%;height: 160px;" id="show_pointImg_{{getNewId}}">
            </div>
            <div style="margin-top: 0" class="list media-list no-hairlines">
                  <ul style="padding:0 20px;" id="point_detail_checkCompletedNew_{{getNewId}}"></ul>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
              getNewId: (new Date()).getTime()
          }
        },
        on: {
            // pageInit: function (e, page) {},
            pageInit: function(e, page) {
                var self = this;
                var newCode="";
                //判断是否有特殊字符-针对铁路的巡检
                 if(self.$route.params.isHave==0){
                    newCode="#"+self.$route.params.visualCode;
                 }else{
                    newCode=self.$route.params.visualCode;
                 }
                Dao.getTaskPointInfoByVisualCodeNew({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    account:userInfor.accountName,
                    visualCode:newCode,
                    taskId:self.$route.params.taskId
                },function(data) {
                    $("#check_pointName_"+self.getNewId).empty();
                    $("#point_detail_checkCompletedNew_"+self.getNewId).empty();
                    $("#check_pointName_"+self.getNewId).append(common.transNullundefinedToline(data.pointName));
                    $("#show_pointImg_"+self.getNewId).attr('src',picCheckPoint(data.picUrl));
                    var pointList = data.contentList;
                    if (pointList.length > 0){
                        for (var i = 0; i < pointList.length;i++) {
                            var optionHtml='';
                            var disqualification = '';
                            Dao.getOptionListByPointId({
                                userName:userInfor.accountName,
                                deviceId:appKeyObj.deviceId,
                                contentId:pointList[i].pointContentId,
                                optionVersion:pointList[i].optionVersion==null?"":pointList[i].optionVersion
                            },function(data){
                                for (var j = 0; j < data.length;j++) {
                                    //判断是否被选中
                                    var qualified = '';
                                    var color='';
                                    var bor='';
                                    var bor2='';
                                    if (pointList[i].pointOptionId == data[j].id) {
                                        qualified = 'checked';
                                         if(pointList[i].result==1){
                                            color='select-green';
                                            bor = 'checkColor-bor-green';
                                            bor2='checkColor-bor-green-2';
                                         }else{
                                            color='select-red';
                                            bor = 'checkColor-bor-red';
                                            bor2='checkColor-bor-red-2';
                                         }
                                    }
                                    optionHtml+=`<div class="item-title-row point-check-list `+bor+`">
                                        <label class="item-radio item-content disabled">
                                            <input type="radio" `+ qualified +` data-type="`+common.transNullundefinedToline(pointList[i].content)+`" name="checkPoint-checkbox`+pointList[i].id+`" value="`+data[j].id+`" data-value="`+data[j].isOk+`" data-option="`+common.transNullundefinedToline(data[j].option)+`"/>
                                            <i style="border-radius: 18px;" class="icon icon-radio `+bor2+`"></i>
                                            <div class="`+color+`">
                                                <div class="item-title">`+data[j].option+`</div>
                                            </div>
                                        </label>
                                    </div>`;
                                }
                            },false);
                            $("#point_detail_checkCompletedNew_"+self.getNewId).append(`<li>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                    <div class="my-item-title">`+common.transNullundefinedToline(pointList[i].content)+`</div>
                                    </div>
                                    `+optionHtml+`
                                </div>
                            </li>`);
                        }
                    }
                });
            },
        },
    }
</script>

<style scoped>
    .select-green{
        color: green;
    }
    .select-red{
        color: red;
    }
    .navbar .right {
        margin-left: 0;
        margin-right: 0px;
    }
    .my-item-title{
        min-width: 0;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .list .item-inner:after{
        height: 0px!important;
    }
    .point-details{
        font-family: HiraginoSansGB-W3;
        font-size: 12px;
        line-height: 1.58;
        color: #666666;
        padding: 20px 0;
        width: 100%;
    }
    .checkColor-gray{
        color: #000;
    }
    .checkColor-bor-gray{
        border:1px solid #000;
    }
    .checkColor-bor-gray-2{
        border-color: #000 !important;
    }
    .checkColor-bor-gray-2::after{
        background-color: #000 !important;
    }
    .checkColor-red{
        color: #E07762;
    }
    .checkColor-bor-red{
        border:1px solid #E07762;
    }
    .checkColor-bor-red-2{
        border-color: #E07762 !important;
    }
    .checkColor-bor-red-2::after{
        background-color: #E07762 !important;
    }
    .checkColor-green{
        color: #69BA71;
    }
    .checkColor-bor-green{
        border:1px solid #69BA71;
    }
    .checkColor-bor-green-2{
        border-color: #69BA71 !important;
    }
    .checkColor-bor-green-2::after{
        background-color: #69BA71 !important;
    }
</style>
